<template>
  <div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
      <!--右边上半区域-->
      <!-- 2.把数据绑定在子组件的标签上(自定义属性) -->
      <app-hobby
        :hobbies="hobbies"
        :titles="titles"
        :remove="remove"
      ></app-hobby>
      <!--右边下半区域-->
      <app-salary :empList="empList" @del="delSalary">
        <template v-slot:header>
          <h1>
            工资列表
          </h1>
        </template>
        <template v-slot:title>
          <h2>好开心，准备下课</h2>
        </template>
      </app-salary>

      <h2>验证axios的二次封装</h2>
      用户名: <input type="text" v-model.trim="name" @blur="checkname" /> <br />
      密码： <input type="text" v-model.trim="psw" /> <br />
      <button @click="reg">注册</button>
    </div>
  </div>
</template>

<script>
import appHobby from "./appHobby.vue";
import appSalary from "./appSalary.vue";
import userApi from "../api/userApi"; //引入用户接口
// console.log(userApi, 8899);
/*
  父子组件通信：
    * props:父子和子父通信
      1.在父组件准备好数据(父组件)
      2.把数据绑定在父组件的子组件的标签上(父组件)
      3.在子组件准备props属性接收父组件传过来的数据(子组件)：有三个写法
      4.在子组件运用父组件传过来的数据进行页面渲染(子组件)
    * $emit 自定义事件 子父通信
    * slot 插槽 父子通信
      * 匿名插槽
        * 父组件：  <template>
                      <h1>
                        工资表
                      </h1>
                    </template>
        * 子组件： <slot />
      * 具名插槽
         * 父组件： <template v-slot:header>
                      <h1>
                        工资表
                      </h1>
                    </template>
          * 子组件：<slot name="header">
*/
export default {
  data() {
    return {
      //1.在父组件准备好数据
      hobbies: ["看书", "王者", "睡觉", "撸代码"],
      titles: "兴趣爱好",
      empList: [],
      name: "",
      psw: "",
      isok: false
    };
  },

  components: { appHobby, appSalary },

  methods: {
    remove(index) {
      let isok = confirm("您确定要删除这项爱好吗?");
      if (isok) {
        this.hobbies.splice(index, 1);
      }
    },
    delSalary(index) {
      // alert("触发了" + index);
      let isok = confirm("您确定要删除这位员工吗?");
      if (isok) {
        this.empList.splice(index, 1);
      }
    },

    //方式一：在主入口文件，引入axios，在组件内容调用axios发送ajax获取本地json数据
    // getdata() {
    //   this.$axios.get("http://localhost:8080/salary.json").then(res => {
    //     console.log(res.data, 666);
    //     this.empList = res.data;
    //   });
    // }

    //方式二：对axios进行二次封装，把所有的接口统一写在api里面，在组件内调用接口即可
    //验证用户名是否存在
    checkname() {
      if (this.name) {
        let p = userApi.checkName(this.name);
        console.log(p, 666);
        p.then(res => {
          console.log(res.data, 5566);
          if (res.data.flag) {
            this.isok = true;
          } else {
            this.isok = false;
          }
        });
      }
    },

    reg() {
      if (this.name && this.psw && this.isok) {
        userApi.reg(this.name, this.psw).then(res => {
          console.log(res.data, 999);
        });
      }
    }
  },

  created() {
    // this.getdata();
  }
};
</script>

<style scoped>
</style>